<template>
  <div id="wj">
      <div class="hader">
          <div class="hader2">
            <router-link :to="{
            name:'Home'
            }">
            <img src="../assets/zuo.png" alt="">
            </router-link>
          </div>
          <div class="hader3">
              <span>完结</span>
          </div>
      </div>
      <div class="wj">
          <ul>
              <li v-for="(item) in wjList" :key="item.info_id">
                  <div class="wj2">
                    <img :src="item.image_ext_url" alt="">
                    <p>{{item.extra.name}}</p>
                  </div>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            wjList:[]
        }
    },
    created() {
        this.$axios.get('recommend_list?location_en=ending_works_list&_type=h5').then((res) => {
            console.log(res.data);
            this.wjList = res.data.data.ending_works_list;
        })
    }
}
</script>

<style>
.hader{
    height: 2.345625rem /* 37.53/16 */;
    /* background-color: pink; */
    background-color: #fff;
}
.hader2{
    width: 2.3125rem /* 37/16 */;
    height: 2.3125rem /* 37/16 */;
    /* border: 1px solid black; */
    float: left;
}
.hader2 img{
    width: 2.75rem;
    height: 2.75rem;
    margin: -.1875rem /* 3/16 */ -.1875rem /* 3/16 */;
}
.hader3{
    width: 2.3125rem /* 37/16 */;
    height: 2.3125rem /* 37/16 */;
    /* border: 1px solid black; */
    float: left;
    margin-left: 8.125rem /* 130/16 */;
    text-align: center;
    line-height: 2.1875rem /* 35/16 */;
}
.hader3 span{
    color: #333;
}
.wj2 img{
    width: 100%;
    height: 12.5rem /* 200/16 */;
    border-radius: .5rem;
}
.wj2 p{
    font-size: 1rem;
    color: #666;
    margin-top: .3125rem /* 5/16 */;
    margin-bottom: .3125rem /* 5/16 */;
}
</style>